<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue'
import {
  ElMessage,
  ElMessageBox,
  ElLoading,
  ElNotification
} from 'element-plus' // 新增 ElNotification
import { FullScreen, Close, ArrowLeft } from '@element-plus/icons-vue'
import socketService from '@/utils/socketio'
import { useRobotStore } from '@/stores/modules/robot'
import router from '@/router'
import { completeAlert } from '@/api/alert'
import { getDetectionsByAlertId } from '@/api/detection'

const robotStore = useRobotStore()

// --- 语音合成 ---
const synth = window.speechSynthesis
let lastSpeechTime = 0
const SPEECH_INTERVAL = 2000

const speakAlert = (count) => {
  const now = Date.now()
  if (now - lastSpeechTime < SPEECH_INTERVAL) return

  const message = `检测到${count}人`
  console.log(message)
  const utterance = new SpeechSynthesisUtterance(message)
  utterance.lang = 'zh-CN'
  utterance.volume = 1.0
  utterance.rate = 1.0
  utterance.pitch = 1.0

  const voices = synth.getVoices()
  const chineseVoice = voices.find((voice) => voice.lang === 'zh-CN')
  if (chineseVoice) {
    utterance.voice = chineseVoice
  }

  synth.speak(utterance)
  lastSpeechTime = now
}

// --- Socket.IO ---
// --- Socket.IO ---
const handleDetection = (data) => {
  console.log('收到检测数据:', data)
  setTimeout(() => {
    fetchDetections()
  }, 500)
  if (data.count > 0) {
    speakAlert(data.count)
    // 修改：使用红色预警通知
    ElNotification({
      title: '紧急预警：检测到被困人员！',
      message: `人数: ${data.count}，检测时间: ${new Date().toLocaleString()}`,
      type: 'error', // 使用 error 类型，红色主题更醒目
      position: 'top-right', // 右上角显示
      duration: 7000, // 延长显示时间到7秒，确保用户注意
      customClass: 'critical-detection-notification', // 自定义类名
      iconClass: 'el-icon-warning', // 使用警告图标
      showClose: true // 允许手动关闭
    })
  }
}

// --- 视频流 ---
const baseUrl = 'http://38.246.253.109:5000'
const queryParams = ref('')

const detectionVideo = ref('')
const dehazedVideo = ref('')
const infraredVideo = ref('')
const thermalVideo = ref('')

const activeTab = ref('detection')

const isDetectionLoading = ref(true)
const isDehazedLoading = ref(true)
const isInfraredLoading = ref(true)
const isThermalLoading = ref(true)

const updateVideoSources = () => {
  queryParams.value = new URLSearchParams({
    alertId: robotStore.alertId,
    location: robotStore.robotInfo.location
  }).toString()

  isDetectionLoading.value = true
  isDehazedLoading.value = true
  isInfraredLoading.value = true
  isThermalLoading.value = true

  const timestamp = Date.now()
  if (activeTab.value === 'detection') {
    detectionVideo.value = `${baseUrl}/detected_feed?${queryParams.value}&_t=${timestamp}`
    infraredVideo.value = `${baseUrl}/vi_feed?${queryParams.value}&_t=${timestamp}`
    thermalVideo.value = `${baseUrl}/ir_feed?${queryParams.value}&_t=${timestamp}`
    dehazedVideo.value = ''
  } else if (activeTab.value === 'dehaze') {
    detectionVideo.value = ''
    dehazedVideo.value = `${baseUrl}/dehazed_feed?${queryParams.value}&_t=${timestamp}`
    infraredVideo.value = `${baseUrl}/raw_feed?${queryParams.value}&_t=${timestamp}`
    thermalVideo.value = ''
  }
}

watch(
  [activeTab, () => robotStore.alertId, () => robotStore.robotInfo.location],
  () => {
    window.stop()
    if (robotStore.alertId && robotStore.robotInfo.location) {
      updateVideoSources()
    } else {
      detectionVideo.value = ''
      dehazedVideo.value = ''
      infraredVideo.value = ''
      thermalVideo.value = ''
    }
  },
  { immediate: true, deep: true }
)

const handleVideoLoad = (type) => {
  console.log(`${type} video loaded`)
  if (type === 'detection') isDetectionLoading.value = false
  if (type === 'dehazed') isDehazedLoading.value = false
  if (type === 'infrared') isInfraredLoading.value = false
  if (type === 'thermal') isThermalLoading.value = false
}

const handleVideoError = (type) => {
  console.error(`${type} video failed to load`)
  ElMessage.error(`${type} 视频流加载失败，请检查网络或服务器`)
  if (type === 'detection') isDetectionLoading.value = false
  if (type === 'dehazed') isDehazedLoading.value = false
  if (type === 'infrared') isInfraredLoading.value = false
  if (type === 'thermal') isThermalLoading.value = false
}

// --- 机器人信息 & 检测结果 ---
const robotData = ref({})
const detectionResults = ref([])
const pageNum = ref(1)
const pageSize = ref(10)
const total = ref(0)

const fetchDetections = async () => {
  if (!robotStore.alertId) return
  try {
    const { data } = await getDetectionsByAlertId(
      robotStore.alertId,
      pageNum.value,
      pageSize.value
    )
    detectionResults.value = data.list
    total.value = data.total
  } catch (error) {
    console.error('获取检测结果失败:', error)
  }
}

const handleSizeChange = (newSize) => {
  pageSize.value = newSize
  fetchDetections()
}

const handleCurrentChange = (newPage) => {
  pageNum.value = newPage
  fetchDetections()
}

// --- 全屏 ---
const isFullscreen = ref(false)
const fullscreenVideoRef = ref(null)
const detectionVideoRef = ref(null)
const dehazedVideoRef = ref(null)
const detectionInfraredVideoRef = ref(null)
const detectionThermalVideoRef = ref(null)
const dehazeInfraredVideoRef = ref(null)

const toggleFullscreen = (videoRef) => {
  const videoElement = videoRef
  if (!videoElement) {
    ElMessage.error('视频元素引用无效，无法进入全屏模式')
    console.error('Video ref element is null')
    return
  }

  if (!document.fullscreenElement) {
    fullscreenVideoRef.value = videoRef
    videoElement.parentElement
      .requestFullscreen()
      .then(() => {
        isFullscreen.value = true
        document.addEventListener('fullscreenchange', handleFullscreenChange)
      })
      .catch((err) => {
        ElMessage.error(`无法进入全屏模式: ${err.message}`)
        console.error('Fullscreen request error:', err)
        fullscreenVideoRef.value = null
      })
  } else {
    document.exitFullscreen().catch((err) => {
      console.error('Fullscreen exit error:', err)
    })
  }
}

const handleFullscreenChange = () => {
  if (!document.fullscreenElement) {
    isFullscreen.value = false
    fullscreenVideoRef.value = null
    document.removeEventListener('fullscreenchange', handleFullscreenChange)
  }
}

// --- 初始化和生命周期 ---
const initData = async () => {
  try {
    if (robotStore.alertId) {
      fetchDetections()
    } else {
      console.warn('Alert ID is missing, cannot fetch detections initially.')
    }
  } catch (error) {
    ElMessage.error('页面初始化数据加载失败')
    console.error('Init data error:', error)
  }
}

const goBack = () => {
  router.go(-1)
}

onMounted(async () => {
  if (!robotStore.alertId || !robotStore.robotInfo.id) {
    ElMessage.error('缺少必要的机器人或任务信息，无法加载监控页面。')
    router.replace('/robot/monitor')
    return
  }

  try {
    robotData.value = { ...robotStore.robotInfo }
    await socketService.isConnected()
    socketService.on('detection', handleDetection)
    await initData()
  } catch (error) {
    ElMessage.error('Socket.IO 连接失败，请检查网络或服务器状态')
    console.error('Socket.IO 连接错误:', error)
  }
})

onUnmounted(() => {
  console.log('Component Unmounted')
  socketService.off('detection', handleDetection)
  socketService.disconnect()
  detectionVideo.value = ''
  dehazedVideo.value = ''
  infraredVideo.value = ''
  thermalVideo.value = ''
  window.stop()
  robotStore.setRobotInfo({})
  robotStore.setAlertId('')

  if (document.fullscreenElement) {
    document.removeEventListener('fullscreenchange', handleFullscreenChange)
    document.exitFullscreen()
  }
  synth.cancel()
})

// --- 辅助函数 ---
const getStatusType = (status) =>
  ({ 执行任务: 'primary', 待机: 'success', 充电中: 'warning', 离线: 'info' })[
  status
  ] || 'info'

const getBatteryStatus = (battery) => {
  if (battery <= 20) return 'exception'
  if (battery <= 50) return 'warning'
  return 'success'
}

const completeTask = async () => {
  try {
    await ElMessageBox.confirm('确定要完成当前任务吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })

    const loadingInstance = ElLoading.service({
      lock: true,
      text: '任务结束中...',
      background: 'rgba(0, 0, 0, 0.7)'
    })
    try {
      const alertId = robotStore.alertId
      await completeAlert(alertId)
      robotStore.setAlertId('')
      robotStore.setRobotInfo({})
      router.push('/robot/monitor')
      ElMessage.success('任务已成功结束')
    } catch (error) {
      ElMessage.error('结束任务失败，请重试')
      console.error('Complete task error:', error)
    } finally {
      loadingInstance.close()
    }
  } catch (action) {
    if (action === 'cancel') {
      ElMessage.info('已取消操作')
    } else {
      console.error('Complete task confirmation error:', action)
    }
  }
}
</script>

<!-- <template> 和 <style> 保持不变，无需修改 -->
<template>
  <div class="live-monitor-page">
    <header class="page-header">
      <div class="header-left">
        <el-button circle :icon="ArrowLeft" @click="goBack" class="back-btn" />
        <h2>机器人现场监控详情</h2>
      </div>
      <div class="header-actions">
        <el-button class="theme-button" round @click="completeTask"
          >完成任务</el-button
        >
      </div>
    </header>

    <div class="main-content">
      <section class="video-section">
        <el-tabs v-model="activeTab" class="video-tabs">
          <el-tab-pane label="检测" name="detection">
            <div class="video-grid">
              <div class="video-card main-video">
                <div class="video-header">
                  <h3>人体检测视频</h3>
                  <el-button
                    v-if="detectionVideo"
                    circle
                    :icon="isFullscreen && fullscreenVideoRef === detectionVideoRef
                        ? Close
                        : FullScreen
                      "
                    @click="toggleFullscreen(detectionVideoRef)"
                    class="fullscreen-btn"
                  />
                </div>
                <div
                  class="video-player-container"
                  v-loading="isDetectionLoading"
                  element-loading-text="视频加载中..."
                  element-loading-background="rgba(0, 0, 0, 0.6)"
                >
                  <img
                    v-if="detectionVideo"
                    ref="detectionVideoRef"
                    :src="detectionVideo"
                    @load="handleVideoLoad('detection')"
                    @error="handleVideoError('detection')"
                    class="video-player"
                  />
                  <div
                    v-else-if="!isDetectionLoading"
                    class="video-placeholder"
                  >
                    视频加载失败或无信号
                  </div>
                </div>
              </div>
              <div class="video-sub-section">
                <div class="video-card">
                  <div class="video-header">
                    <h3>热成像视频</h3>
                    <el-button
                      v-if="thermalVideo"
                      circle
                      :icon="isFullscreen &&
                          fullscreenVideoRef === detectionThermalVideoRef
                          ? Close
                          : FullScreen
                        "
                      @click="toggleFullscreen(detectionThermalVideoRef)"
                      class="fullscreen-btn"
                    />
                  </div>
                  <div
                    class="video-player-container sub-video-container"
                    v-loading="isThermalLoading"
                    element-loading-text="加载中..."
                    element-loading-background="rgba(0, 0, 0, 0.6)"
                  >
                    <img
                      v-if="thermalVideo"
                      ref="detectionThermalVideoRef"
                      :src="thermalVideo"
                      @load="handleVideoLoad('thermal')"
                      @error="handleVideoError('thermal')"
                      class="video-player"
                    />
                    <div
                      v-else-if="!isThermalLoading"
                      class="video-placeholder"
                    >
                      加载失败
                    </div>
                  </div>
                </div>
                <div class="video-card">
                  <div class="video-header">
                    <h3>红外线视频</h3>
                    <el-button
                      v-if="infraredVideo"
                      circle
                      :icon="isFullscreen &&
                          fullscreenVideoRef === detectionInfraredVideoRef
                          ? Close
                          : FullScreen
                        "
                      @click="toggleFullscreen(detectionInfraredVideoRef)"
                      class="fullscreen-btn"
                    />
                  </div>
                  <div
                    class="video-player-container sub-video-container"
                    v-loading="isInfraredLoading"
                    element-loading-text="加载中..."
                    element-loading-background="rgba(0, 0, 0, 0.6)"
                  >
                    <img
                      v-if="infraredVideo"
                      ref="detectionInfraredVideoRef"
                      :src="infraredVideo"
                      @load="handleVideoLoad('infrared')"
                      @error="handleVideoError('infrared')"
                      class="video-player"
                    />
                    <div
                      v-else-if="!isInfraredLoading"
                      class="video-placeholder"
                    >
                      加载失败
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="去烟" name="dehaze">
            <div class="video-grid">
              <div class="video-card main-video">
                <div class="video-header">
                  <h3>去烟视频</h3>
                  <el-button
                    v-if="dehazedVideo"
                    circle
                    :icon="isFullscreen && fullscreenVideoRef === dehazedVideoRef
                        ? Close
                        : FullScreen
                      "
                    @click="toggleFullscreen(dehazedVideoRef)"
                    class="fullscreen-btn"
                  />
                </div>
                <div
                  class="video-player-container"
                  v-loading="isDehazedLoading"
                  element-loading-text="视频加载中..."
                  element-loading-background="rgba(0, 0, 0, 0.6)"
                >
                  <img
                    v-if="dehazedVideo"
                    ref="dehazedVideoRef"
                    :src="dehazedVideo"
                    @load="handleVideoLoad('dehazed')"
                    @error="handleVideoError('dehazed')"
                    class="video-player"
                  />
                  <div v-else-if="!isDehazedLoading" class="video-placeholder">
                    视频加载失败或无信号
                  </div>
                </div>
              </div>
              <div class="video-sub-section">
                <div class="video-card">
                  <div class="video-header">
                    <h3>红外线视频</h3>
                    <el-button
                      v-if="infraredVideo"
                      circle
                      :icon="isFullscreen &&
                          fullscreenVideoRef === dehazeInfraredVideoRef
                          ? Close
                          : FullScreen
                        "
                      @click="toggleFullscreen(dehazeInfraredVideoRef)"
                      class="fullscreen-btn"
                    />
                  </div>
                  <div
                    class="video-player-container sub-video-container"
                    v-loading="isInfraredLoading"
                    element-loading-text="加载中..."
                    element-loading-background="rgba(0, 0, 0, 0.6)"
                  >
                    <img
                      v-if="infraredVideo"
                      ref="dehazeInfraredVideoRef"
                      :src="infraredVideo"
                      @load="handleVideoLoad('infrared')"
                      @error="handleVideoError('infrared')"
                      class="video-player"
                    />
                    <div
                      v-else-if="!isInfraredLoading"
                      class="video-placeholder"
                    >
                      加载失败
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </section>

      <section class="data-section">
        <el-card class="info-card" shadow="never">
          <template #header>
            <div class="card-header">
              <span>机器人信息</span>
            </div>
          </template>
          <el-descriptions :column="1" border class="modern-descriptions">
            <el-descriptions-item label="机器人名称">{{
              robotData.robotName || 'N/A'
            }}</el-descriptions-item>
            <el-descriptions-item label="当前位置">{{
              robotData.location || 'N/A'
            }}</el-descriptions-item>
            <el-descriptions-item label="最后更新时间">{{
              robotData.lastActiveTime || 'N/A'
            }}</el-descriptions-item>
            <el-descriptions-item label="电量">
              <el-progress
                v-if="typeof robotData.batteryLevel === 'number'"
                :percentage="robotData.batteryLevel"
                :status="getBatteryStatus(robotData.batteryLevel)"
              />
              <span v-else>N/A</span>
            </el-descriptions-item>
            <el-descriptions-item label="状态">
              <el-tag
                v-if="robotData.status"
                :type="getStatusType(robotData.status)"
                >{{ robotData.status }}</el-tag
              >
              <span v-else>N/A</span>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>

        <el-card class="detection-card" shadow="never">
          <template #header>
            <div class="card-header">
              <span>人体识别结果</span>
            </div>
          </template>
          <div class="detection-content">
            <el-table
              :data="detectionResults"
              class="modern-table"
              stripe
              :header-cell-style="{ 'text-align': 'center' }"
              :cell-style="{ 'text-align': 'center' }"
              empty-text="暂无检测结果"
            >
              <el-table-column
                prop="detectionTime"
                label="检测时间"
                min-width="180"
              />
              <el-table-column prop="count" label="人数" min-width="100" />
              <el-table-column prop="location" label="位置" min-width="150" />
            </el-table>
            <el-pagination
              v-if="total > 0"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNum"
              :page-sizes="[10, 20, 50]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              style="margin-top: 16px; justify-content: flex-end"
            />
          </div>
        </el-card>
      </section>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@use 'sass:color';
// 原有样式保持不变，新增通知的自定义样式
.live-monitor-page {
  padding: 2.4rem;
  background: #f5f7fa;
  min-height: 100vh;
  color: #1f2a44;
  --primary-color: #4834d4;
  font-size: 1.6rem;
}

/* 自定义红色预警通知样式 */
:deep(.critical-detection-notification) {
  background-color: #ffe6e6; // 浅红色背景，醒目但不过于刺眼
  border: 2px solid #d32f2f; // 深红色边框，强化警报感
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(211, 47, 47, 0.3); // 红色阴影，增加立体感
  padding: 20px; // 加大内边距，提升内容可读性
  width: 400px; // 稍宽以容纳更多内容
  animation: pulse 1.5s infinite alternate; // 增加脉动动画，吸引注意力

  .el-notification__title {
    color: #b71c1c; // 深红色标题，突出显示
    font-size: 20px; // 加大字体
    font-weight: 700; // 加粗
    margin-bottom: 8px; // 与内容分隔
  }

  .el-notification__content {
    color: #333; // 深灰色正文，确保可读性
    font-size: 16px;
    line-height: 1.6;
  }

  .el-notification__icon {
    color: #d32f2f; // 红色图标，与边框一致
    font-size: 28px; // 加大图标
    margin-right: 12px;
  }

  .el-notification__closeBtn {
    color: #b71c1c; // 关闭按钮与主题一致
    font-size: 18px;
    top: 16px;
    right: 16px;

    &:hover {
      color: #ffffff;
      background: #d32f2f;
      border-radius: 50%;
    }
  }
}

/* 脉动动画 */
@keyframes pulse {
  from {
    transform: scale(1);
    box-shadow: 0 6px 16px rgba(211, 47, 47, 0.3);
  }
  to {
    transform: scale(1.02);
    box-shadow: 0 8px 20px rgba(211, 47, 47, 0.4);
  }
}

/* 通知入场动画 */
@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

/* 其余原有样式保持不变 */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2.4rem;
  flex-wrap: wrap;

  .header-left {
    display: flex;
    align-items: center;
    gap: 1.6rem;

    .back-btn {
      background: #fff;
      border: 1px solid #dcdfe6;
      font-size: 1.8rem;

      &:hover {
        background: #f5f7fa;
        border-color: var(--primary-color);
        color: var(--primary-color);
      }
    }

    h2 {
      font-size: 2.4rem;
      font-weight: 600;
      margin: 0;
      white-space: nowrap;
    }
  }

  .header-actions {
    display: flex;
    align-items: center;
    gap: 1.6rem;

    .theme-button {
      background: var(--primary-color);
      border-color: var(--primary-color);
      color: #fff;
      font-size: 1.6rem;

      &:hover {
        background: color.adjust(#4834d4, $lightness: -10%);
        border-color: color.adjust(#4834d4, $lightness: -10%);
      }
    }
  }
}

.main-content {
  display: flex;
  gap: 2.4rem;
}

.video-section {
  flex: 2;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  min-width: 0;

  .video-tabs {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    padding: 10px 20px;

    :deep(.el-tabs__header) {
      margin-bottom: 16px;
      border-bottom: none;
    }

    :deep(.el-tabs__nav-wrap) {
      &::after {
        content: none;
      }
    }

    :deep(.el-tabs__item) {
      font-size: 1.8rem;
      font-weight: 500;
      padding: 12px 24px;
      color: #606266;
      border-radius: 20px;
      transition: all 0.3s ease;

      &:hover {
        color: var(--primary-color);
        background: #f5f7fa;
      }

      &.is-active {
        color: #fff;
        background: var(--primary-color);
        box-shadow: 0 2px 6px rgba(72, 52, 212, 0.3);
      }
    }

    :deep(.el-tabs__active-bar) {
      display: none;
    }
  }

  .video-grid {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
  }

  .video-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    padding: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    .video-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
      flex-shrink: 0;

      h3 {
        font-size: 2rem;
        font-weight: 600;
        margin: 0;
      }
    }

    .video-player-container {
      position: relative;
      width: 100%;
      flex-grow: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #e9ecef;
      border-radius: 8px;
      overflow: hidden;
      min-height: 200px;

      &.sub-video-container {
        min-height: 150px;
      }

      .video-player {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 8px;
      }

      .video-placeholder {
        color: #6c757d;
        font-size: 1.6rem;
      }
    }
  }

  .main-video .video-player-container {
    min-height: 40rem;
  }

  .video-sub-section {
    display: flex;
    gap: 2.4rem;

    .video-card {
      flex: 1;
      min-width: 0;
    }
  }
}

.data-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  min-width: 0;

  .info-card,
  .detection-card {
    background: #fff;
    border-radius: 1.2rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  }

  .card-header {
    font-size: 2rem;
    font-weight: 600;
    padding-bottom: 8px;
    border-bottom: 1px solid #eee;
  }

  :deep(.el-card__header) {
    padding: 16px 20px;
    border-bottom: none;
  }
  :deep(.el-card__body) {
    padding: 20px;
  }

  .detection-content {
    overflow-y: auto;
  }

  .modern-table {
    border-radius: 8px;
    overflow: hidden;
    font-size: 1.6rem;

    :deep(.el-table__header th) {
      background: #fafafa;
      color: #1f2a44;
      font-weight: 600;
      font-size: 1.6rem;
      padding: 12px 0;
    }

    :deep(.el-table__row) {
      font-size: 1.6rem;
      td {
        padding: 12px 0;
      }
    }

    :deep(.el-table__row:hover > td) {
      background-color: #f5f7fa !important;
    }

    :deep(
        .el-table--striped
          .el-table__body
          tr.el-table__row--striped
          td.el-table__cell
      ) {
      background: #fcfcfc;
    }
    :deep(.el-table .el-table__cell) {
      padding: 10px 10px;
    }
  }

  .modern-descriptions {
    border-radius: 8px;
    overflow: hidden;
    font-size: 1.6rem;

    :deep(.el-descriptions__cell) {
      border-color: #f0f2f5;
      padding: 12px;
      font-size: 1.6rem;
      .el-tag {
        font-size: 1.6rem;
      }
      .el-progress--line {
        width: 80%;
      }
    }

    :deep(.el-descriptions__label) {
      background: #fafafa;
      color: #1f2a44;
      font-weight: 500;
      font-size: 1.6rem;
      min-width: 100px;
      text-align: right;
      padding-right: 15px;
    }
  }
}

.fullscreen-btn {
  background: rgba(255, 255, 255, 0.9);
  font-size: 2.2rem;
  width: 2.2rem;
  height: 2.2rem;
  border: none;
  box-sizing: border-box;
  padding: 6px;
  transition: all 0.3s ease;

  &:hover {
    background: rgba(255, 255, 255, 1);
    transform: scale(1.1);
  }
}

.video-player-container:fullscreen {
  background: #000;
  padding: 0;
  border-radius: 0;
  min-height: 100vh;

  .video-player {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0;
  }
}

.video-player-container:-webkit-full-screen {
  background: #000;
  padding: 0;
  border-radius: 0;
  min-height: 100vh;
  .video-player {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0;
  }
}
.video-player-container:-moz-full-screen {
  background: #000;
  padding: 0;
  border-radius: 0;
  min-height: 100vh;
  .video-player {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0;
  }
}

:deep(.el-loading-mask) {
  border-radius: 8px;
}
:deep(.el-loading-spinner .path) {
  stroke: var(--primary-color);
}
:deep(.el-loading-text) {
  color: #eee;
  margin-top: 8px;
  font-size: 1.4rem;
}

@media screen and (max-width: 1200px) {
  .main-content {
    flex-direction: column;
  }
  .video-section,
  .data-section {
    flex: none;
    width: 100%;
  }
}

@media screen and (max-width: 768px) {
  .live-monitor-page {
    padding: 1.6rem;
  }
  .page-header {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;

    .header-left {
      justify-content: space-between;
      width: 100%;
      h2 {
        font-size: 2rem;
      }
    }
    .header-actions {
      width: 100%;
      justify-content: flex-end;
      .theme-button {
        width: 100%;
      }
    }
  }

  .video-section .main-video .video-player-container {
    min-height: 300px;
  }
  .video-section .video-sub-section {
    flex-direction: column;
  }
  .video-section .sub-video-container {
    min-height: 200px;
  }

  .data-section .modern-descriptions :deep(.el-descriptions__label) {
    min-width: 80px;
    text-align: left;
    padding-right: 10px;
  }
  .data-section .modern-table {
    font-size: 1.4rem;
    :deep(.el-table__header th),
    :deep(.el-table__row) {
      font-size: 1.4rem;
    }
    :deep(.el-table .el-table__cell) {
      padding: 8px 6px;
    }
  }
  :deep(.el-pagination) {
    justify-content: center !important;
    .el-pagination__sizes {
      margin-right: 5px;
    }
    .el-pagination__jump {
      margin-left: 5px;
    }
  }
}
</style>
